<div class="important">
    <img src="../public/all/images/important.png" width="18px"/>
    一个账户只能绑定同一个开户人姓名的银行卡。
</div>

<button class="add_card">添加银行卡</button>

<div class="card">
    <div class="line1">
        <div class="name"><img src="" height="60px"/></div>
        <div class="edit">
            <img src="../public/all/images/phone/bank-edit.png" width="22px"/>
        </div>
        <div class="clear"></div>
    </div>

    <div class="line2">
        <div class="name">开户姓名：<span>--</span></div>
        <div class="account">开户账号：<span>--</span></div>
        <div class="addr">开户网点：<span>--</span></div>
    </div>
</div>

<style type="text/css">
    body {
        background-color: #ebeff0;
    }
    .card {
        margin: 15px;
        background-color: white;
        border: 1px solid #b8b8b8;
        border-radius: 8px;
        display: none;
    }
    .card .line1 {
        border-bottom: 1px solid #b8b8b8;
        height: 50px;
    }
    .card .line1 .name {
        float: left;
        margin: 6px 0 0 20px;
    }
    .card .line1 .name img {
        height: 36px;
    }
    .card .line1 .edit {
        float: right;
        margin-right: 20px;
        margin-top: 10px;
    }
    .card .line2 {
        height: 110px;
        line-height: 36px;
    }
    .card .line2 div {
        margin-left: 20px;
        color: #848484;
    }
    .card .line2 span {
        color: #69a8af;
    }
    .add_card {
        display: block;
        width: 100%;
        margin: auto;
        margin-top: 20px;
        line-height: 50px;
        font-size: 18px;
        display: none;
        background-color: #fff;
        color: #1cb5c3;
        border: 1px solid #b9b9b9;
        border-left: 0px;
        border-right: 0px;
        border-radius: 0px;
        text-align: left;
        text-indent: 15px;
    }
</style>

<script>
    function drawCardInfo() {
        if (!context.user) return;

        var v = context.user.user.bank;
        if (!v || v == '') {
            $(".add_card").show();
            $(".card").hide();
            return;
        }

        v = JSON.parse(v);
        $(".add_card").hide();
        $(".card").show();

        var b;
        for (var i in Util.banks) {
            if (Util.banks[i].name == v.bank) {
                b = Util.banks[i];
                break;
            }
        }
        if (b)
            $(".card .line1 .name img").attr("src", "../public/all/images/phone/" + b.icon);
        else
            $(".card .line1 .name").htmk(v.bank);
        $(".card .line2 .name span").html(context.user.user.name || '');
        $(".card .line2 .account span").html("尾号 " + v.account.substring(v.account.length - 4));
        $(".card .line2 .addr span").html(v.addr);
    }
    drawCardInfo();
    ME.query(drawCardInfo);

    $(".add_card").click(function() {
        Util.jumpUrl({
            file: 'center.html',
            cmd: 'add_card',
        });
    });
    $(".card .edit").click(function() {
        Util.jumpUrl({
            file: 'center.html',
            cmd: 'add_card',
        });
    });
</script>